<template>
  <div class="farm-card-main">
    <el-card :body-style="{padding:0,margin:0,borderRadius:'10px',width:mainWith+'px',borderRadius:'14px'}" shadow="always">
      <div class="farm-item-container" @click="handleClickDetail">
        <img :src="form.imgUrl" :style="{height:(mainWith/5.6)+'px',width:(mainWith/3)+'px'}"/>
        <div class="farm-item-right">
          <div class="farm-item-title">
            <div style="display:flex;flex:2">
              <span class="farm-item-title-span">{{form.name}}</span>
              <div :class="['farm-item-title-status',{'status-wait': form.status==0 || form.status==null},{'status-over': form.status==1},{'status-success': form.status==2}
              ]">{{form.statusLabel}}</div>
<!--              {'status-noset':form.status!=2&&form.status!=1&&form.status!=0}]-->
            </div>
            <div style="display:flex;flex:1;justify-content:flex-end">
              <div class="farm-item-title-status status-point">{{form.pointer}}</div>
            </div>
          </div>
          <div class="farm-item-name" :style="{height:(mainWith/22)+'px'}">地块名:&nbsp;&nbsp;<span>{{form.name}}</span> </div>
          <div class="farm-item-name" :style="{height:(mainWith/23)+'px'}">
            <span style="display:flex;"><span>{{form.area}}</span>&nbsp;亩</span>
            <span style="display:flex;flex: 1;justify-content:flex-end;align-items: baseline" v-if="(form.money)*1>0">农事总费用:&nbsp;
              <span style="color:#f78b05;font-size:24px;font-weight:bolder">{{form.money}}</span>元
            </span>
          </div>
          <div class="farm-item-name" :style="{height:(mainWith/23)+'px'}">
            <div style="display:flex;flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden" :title="form.startDate+'至'+form.endDate">{{form.startDate}}&nbsp;至&nbsp;{{form.endDate}}</div>
            <div style="display:flex;flex: 1;justify-content: flex-end;" :title="form.publish">发布时间:&nbsp;{{form.publish}}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
      data(){
          return {
              mainWith: 0,
              defaultImg: require("@/assets/img/home/land.png"),
              form: {
                  id:"",
                  imgUrl:"",
                  status:"",
                  money:"",
                  area:"",
                  startDate:"",
                  endDate:"",
                  name:"",
                  publish:"",
                  pointer:"",
                  taskName:"",
                  statusLabel:"",
              }
          }
      },
      methods: {
          handleClickDetail(){
              this.$emit("openDetail", this.form)
          },
          setData(obj){
              const {id, width,pointer, taskName,imgUrl,status,money,area,startDate,endDate,name,publish} = obj
              this.mainWith = width
              let label
              switch (status) {
                  case '0':
                      label = '待处理'
                      break;
                  case '1':
                      label = '已处理'
                      break;
                  case '2':
                      label = '已超期'
                      break;
                  default:
                      label = '待处理' //'未设置'
                      break;
              }

              this.form = {
                  id: id,
                  status:status,
                  money:money,
                  area:area,
                  startDate:startDate,
                  endDate:endDate,
                  name:name,
                  publish:publish,
                  statusLabel:label,
                  pointer:pointer,
                  taskName:taskName,
                  imgUrl: imgUrl && imgUrl!=null ? imgUrl : this.defaultImg
              }
          }
      }
  }
</script>
<style scoped>
  .farm-item-container{
    padding: 16px;
    display: flex;
    cursor: pointer;
    user-select: none;
  }
  .farm-item-right{
    flex: 1;
  }
  .farm-item-title-span{
    font-size: 20px;
    font-weight: bolder;
    color: #333;
    display:flex;
    align-items: center;
    width: 120px;
    margin-right: 10px;
  }
  .farm-item-title{
    color: #333;
    padding-left: 20px;
    align-items: center;
    display: flex;
    width:100%;
  }
  .farm-item-title-status{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    line-height: 36px;
    padding: 10px 16px;
    border-radius: 4px;
    text-align: center;
    color: #fff;
  }
  .farm-item-name{
    color: #333;
    display: flex;
    flex:1;
    padding-left: 20px;
    align-items: center;
    font-size: 16px;
  }

  .status-wait{
    background-color: #ce0000;
  }
  .status-over{
    background-color: #ff680d;
  }
  .status-success{
    background-color: #009865;
  }
  .status-noset{
    background-color: #ffcc66;
  }
  .status-point{
    color: #009865;
    border: 1px solid #009865;
  }
</style>
